<%@page import="com.augmentum.oes.util.PathUtil"%>
<%@page import="com.augmentum.oes.model.Question"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" pageEncoding="UTF-8"%>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="java.util.List" %>
<%@ page import="com.augmentum.oes.model.User" %>
<%@ page import="com.augmentum.oes.util.PropertyUtil" %>
<%@ page import="com.augmentum.oes.util.PathUtil" %>
<%@ page import="com.augmentum.oes.Constants" %>
<%@ page import="com.augmentum.oes.util.StringUtil" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">   
    <title>Login</title>
    <link rel="stylesheet" href="<%=PropertyUtil.getStaticPath() %>/static/css/main.css?timeStamp="<%=Math.random()%>type="text/css" />
    <link rel="stylesheet" href="<%=PropertyUtil.getStaticPath() %>/static/css/question.css?timeStamp="<%=Math.random()%> type="text/css" />
    <link rel="stylesheet" href="<%=PropertyUtil.getStaticPath() %>/static/css/divtable.css?timeStamp="<%=Math.random()%> type="text/css" />
    <script src="<%=PropertyUtil.getStaticPath() %>/static/js/jquery-1.10.2.min.js"></script>
    <script src="<%=PropertyUtil.getStaticPath() %>/static/js/dialog.js?timeStamp="<%=Math.random()%>></script>
    <script src="<%=PropertyUtil.getStaticPath() %>/static/js/question.js?timeStamp="<%=Math.random()%>/></script>
  </head>
  <body>
    <div class="header">
    <div class="logo-icon">
    </div>
    <div class="head-title">
        Online Exam System
    </div>
    <div class="user-logout">
      <div class="language">
            中文
      </div>
      <div class="person-info-outdiv">
        <div onclick="javascript:window.location.href='<%=PathUtil.getFullPath("userdetail.action")%>'" class="person-info-inner float-left">
        <div class="person-info-inner"><img src="<%=PropertyUtil.getStaticPath() %>/static/images/ICN_Web_PersonalInformation_20x20.png" class="person-info-currentpage" /></div>
        <span >${USER.userName}</span></div>
        <div class="logout1" onclick="javascript:window.location.href='../static/logout.jsp'">Logout</div>
      </div>
    </div>
    </div>
    <div class="tab-panel">
    <div class="question-manage active" onClick="toQuestionList();">
      Question Management
    </div>
    <div class="exam1-manage" onClick="toExamList();">
      Exam Management
    </div>
    </div>
    <div class="content-panel content-panel-no-breadcrumb">
    <div class="list-panel">
      <div class="menu-list-outdiv margin-top-50">
        <ul class="menu-list">
          <li class="list-over" onClick="toQuestionList();">Question List</li>
          <li onmouseout="this.className='list-out'" onClick="toCreateQuestion();" onmouseover="this.className='list-over'" onclick="toCreate();">Create Question</li>
        </ul>
      </div>
    </div>
    <div class="list-content-panel">
    <div class="search-panel">
      <div class="outdiv search-icon cursor" >
        <%-- <input type="text" class="input" value="${keyWord}" name="search" id="search" placeholder="Please input the keyword"/> --%>
        <input type="text" class="input" 
        value="<c:if test="${!empty keyWord}"><%=StringUtil.htmlEncode((String)session.getAttribute("keyWord")) %></c:if>" 
        name="search" id="search" placeholder="Please input the keyword"/>
        <div id="searchButton" onclick="searchQuestion('${pagnation.currentPage}','${sortstatus}','${pagnation.pageSize }');" class="search-icon-div"></div>
        <input type="hidden" value="${pagnation.currentPage}" id="currentPageHidden">
        <input type="hidden" value="${sortstatus}" id="sortstatusHidden">
        <input type="hidden" value="${pagnation.pageSize }" id="pageSizeHidden">
        
      </div>
    </div>
    <div class="list-content">
      <form action="<%=PathUtil.getFullPath("deletequestion.action")%>" method="POST" id="deleteForm">
        <div >
          <div class="head">
                <div class="head-div">
                  <div  class="cursor" onclick="sortById('<%=PathUtil.getFullPath("")%>','<%=PropertyUtil.getStaticPath() %>','${pagnation.pageSize }');">
                    <input type="hidden" id="status" value="${sortstatus}"> 
                    ID<img id="sort" src="<%=PropertyUtil.getStaticPath()%>/static/images/ICN_Decrese_10x15.png.png"/>
                  </div>
                </div>
                <div class="head-div">
                  Desription
                </div>
                <div class="head-div">
                  Edit
                </div>
                <div class="sel-div">
                  <img onclick="changeimg_all(this,'<%=PropertyUtil.getStaticPath() %>');" id="deleteImg" src="<%=PropertyUtil.getStaticPath()%>/static/images/ICN_Unselected_15x15.png  .png" />
                </div>
            </div>
            
              <c:if test="${empty question_view_list}">
                <script>
                  $(function(){modalDialogShow("Don't hava any data!");});
                </script>
              </c:if>
              <div style="overflow: auto;height: 300px;">
              <c:forEach var="row" items="${question_view_list}" varStatus="status">
              <div class="div-body cursor" onmouseover="this.className='div-body change-background-over cursor'" onmouseout="this.className='div-body change-background-out cursor'">
                <div class="td1">
                   ${(pagnation.currentPage-1)*pagnation.pageSize+status.index+1} <%-- ${status.index+1 } --%>
                </div>
                <div class="td2">
                  QT00${row.id }
                </div>
                <div class="td3 cursor" title="${row.question}" >
                  <div name="queContent" class="div-over-hidden" onclick="toDetail('${row.id}')" name=""><c:set var="questionContent" value="${row.question}"></c:set><%= StringUtil.htmlEncode((String)pageContext.getAttribute("questionContent"))%></div>
                   
                </div>
                <div class="td4 " >
                  <div class="cursor" onclick="toEditQuestion('${row.id}','<%=PathUtil.getFullPath("") %>')" > <img alt="alt" src="<%=PropertyUtil.getStaticPath() %>/static/images/ICN_Edit_15x15.png.png" /></div>
                </div>
                <div class="td5">
                  <input type="checkbox" value="${row.id}" id="checkboxOneInput${row.id }" name="checkboxOneInput"  />
                  <label for="checkboxOneInput${row.id }" class='cursor' ><img id="delete_all_img" name="delete_all_img" onclick="changeimg(this,'<%=PropertyUtil.getStaticPath() %>');" src="<%=PropertyUtil.getStaticPath() %>/static/images/ICN_Unselected_15x15.png  .png" /></label>
                </div>
               </div>
             </c:forEach>
             </div>
          </div>
      </form>
      
   
        <c:if test="${!empty TIP_MESSAGE }">
          <script>
            $(function(){
                modalDialogShow("${TIP_MESSAGE}");
            });
          </script>
       </c:if>
       <% session.removeAttribute(Constants.TIP_MESSAGE); %>
          <div style="height:30px;bottom:10px;position: absolute;">
      <c:if test="${!empty pagnation && pagnation.pageCount>0}">
        <div class="page-div" style="float:left;">
        <div class="page">
          <a class="cursor" <c:if test="${!(pagnation.currentPage eq 1)}">href="javascript:window.location.href='<%=PathUtil.getFullPath("questionlist.action")%>?currentPage=${pagnation.currentPage-1}&sort=${sortstatus }&pageSize=${pagnation.pageSize}&keyWord=${keyWord}'" </c:if> >
            <img  src="<%=PropertyUtil.getStaticPath() %>/static/images/BTN_PageLeft_20x15.png.png" />
          </a>
         
          <c:if test="${pagnation.pageCount>5}">
           <c:if test="${(pagnation.pageCount- pagnation.currentPage)>=3}">
           <c:if test="${pagnation.currentPage-1<1}">
             <a style="color:#FE9901;" href="<%=PathUtil.getFullPath("questionlist.action")%>?currentPage=${pagnation.currentPage}&sort=${sortstatus }&pageSize=${pagnation.pageSize}&keyWord=${keyWord}">${pagnation.currentPage}</a>
             <a href="<%=PathUtil.getFullPath("questionlist.action")%>?currentPage=${pagnation.currentPage+1}&sort=${sortstatus }&pageSize=${pagnation.pageSize}&keyWord=${keyWord}">${pagnation.currentPage+1}</a>
             <a href="<%=PathUtil.getFullPath("questionlist.action")%>?currentPage=${pagnation.currentPage+2}&sort=${sortstatus }&pageSize=${pagnation.pageSize}&keyWord=${keyWord}">${pagnation.currentPage+2}</a>
           </c:if>
           <c:if test="${pagnation.currentPage-1>=1}">
                <c:if test="${pagnation.currentPage-1>=2}">
                   <a href="<%=PathUtil.getFullPath("questionlist.action")%>?currentPage=1&sort=${sortstatus }&pageSize=${pagnation.pageSize}&keyWord=${keyWord}">1</a>
                   <a href="<%=PathUtil.getFullPath("questionlist.action")%>?currentPage=${pagnation.currentPage-2}&sort=${sortstatus }&pageSize=${pagnation.pageSize}&keyWord=${keyWord}">...</a>
                </c:if>
             <a href="<%=PathUtil.getFullPath("questionlist.action")%>?currentPage=${pagnation.currentPage-1}&sort=${sortstatus }&pageSize=${pagnation.pageSize}&keyWord=${keyWord}">${pagnation.currentPage-1}</a>
             <a style="color:#FE9901;" href="<%=PathUtil.getFullPath("questionlist.action")%>?currentPage=${pagnation.currentPage}&sort=${sortstatus }&pageSize=${pagnation.pageSize}&keyWord=${keyWord}">${pagnation.currentPage}</a>
             <a href="<%=PathUtil.getFullPath("questionlist.action")%>?currentPage=${pagnation.currentPage+1}&sort=${sortstatus }&pageSize=${pagnation.pageSize}&keyWord=${keyWord}">${pagnation.currentPage+1}</a>
           </c:if>
           <a href="<%=PathUtil.getFullPath("questionlist.action")%>?currentPage=${pagnation.currentPage+3}&sort=${sortstatus }&pageSize=${pagnation.pageSize}&keyWord=${keyWord}">...</a>
           <a href="<%=PathUtil.getFullPath("questionlist.action")%>?currentPage=${pagnation.pageCount}&sort=${sortstatus }&pageSize=${pagnation.pageSize}&keyWord=${keyWord}">${pagnation.pageCount}</a>
         </c:if>
         <c:if test="${(pagnation.pageCount- pagnation.currentPage)<3}">
         <a href="<%=PathUtil.getFullPath("questionlist.action")%>?currentPage=1&sort=${sortstatus }&pageSize=${pagnation.pageSize}&keyWord=${keyWord}">1</a>
           <a href="<%=PathUtil.getFullPath("questionlist.action")%>?currentPage=${pagnation.pageCount-3}&sort=${sortstatus }&pageSize=${pagnation.pageSize}&keyWord=${keyWord}">...</a>
           <a <c:if test="${pagnation.currentPage eq pagnation.pageCount-2}"> style="color:#FE9901;" </c:if> href="<%=PathUtil.getFullPath("questionlist.action")%>?currentPage=${pagnation.pageCount-2}&sort=${sortstatus }&pageSize=${pagnation.pageSize}&keyWord=${keyWord}">
             ${pagnation.pageCount-2}
           </a>
           <a <c:if test="${pagnation.currentPage eq pagnation.pageCount-1}"> style="color:#FE9901;" </c:if> href="<%=PathUtil.getFullPath("questionlist.action")%>?currentPage=${pagnation.pageCount-1}&sort=${sortstatus }&pageSize=${pagnation.pageSize}&keyWord=${keyWord}">
             ${pagnation.pageCount-1}
           </a>
           <a <c:if test="${pagnation.currentPage eq pagnation.pageCount}"> style="color:#FE9901;" </c:if> href="<%=PathUtil.getFullPath("questionlist.action")%>?currentPage=${pagnation.pageCount}&sort=${sortstatus }&pageSize=${pagnation.pageSize}&keyWord=${keyWord}">
             ${pagnation.pageCount}
           </a>
         </c:if>
         </c:if>
         <c:if test="${pagnation.pageCount<=5 and pagnation.pageCount>0}">
           <c:forEach begin="1" var="row" end="${pagnation.pageCount}" >
             <a <c:if test="${pagnation.currentPage eq row}"> style="color:#FE9901;" </c:if> href="<%=PathUtil.getFullPath("questionlist.action")%>?currentPage=${row}&sort=${sortstatus }&pageSize=${pagnation.pageSize}&keyWord=${keyWord}">${row}</a>
           </c:forEach>
         </c:if>
         
             <a class="cursor" <c:if test="${!(pagnation.currentPage eq pagnation.pageCount)}"> href="javascript:window.location.href='<%=PathUtil.getFullPath("questionlist.action")%>?currentPage=${pagnation.currentPage+1}&sort=${sortstatus }&pageSize=${pagnation.pageSize}&keyWord=${keyWord}'" </c:if>>
               <img src="<%=PropertyUtil.getStaticPath() %>/static/images/BTN_PageRight_20x15.png .png" />
             </a>
           <select name="pageSize" class="pageSizeSelect" id="pageSizeSelect" style="outline:none;" onchange="chagePageSize('${pagnation.currentPage}','${sortstatus }');">
             <option <c:if test="${ pagnation.pageSize ==5 }">selected</c:if> >5</option>
             <option <c:if test="${ pagnation.pageSize ==10}">selected</c:if> >10</option>  
             <option <c:if test="${ pagnation.pageSize ==15}">selected</c:if> >15</option>  
             <option <c:if test="${ pagnation.pageSize ==20}">selected</c:if> >20</option>  
           </select>Per&nbsp;&nbsp;page&nbsp;&nbsp;&nbsp;&nbsp;
             <input type="text" class="page-input" value="" id="pageNumber" name="currentPage"/>
             <button class="btn small-btn" onmouseout="this.className='btn small-btn'" onmouseover="this.className='btn-over small-btn'" onClick="toAnyPage('${pagnation.pageSize}','${sortstatus }');">GO</button>
           </div>
         </div>
        </c:if>
        <c:if test="${!empty pagnation && pagnation.pageCount>0}">
          <div class="div-button delete-button" onclick="confirmDialogShow('Are sure delete the selected options?');" onmouseout="this.className='div-button delete-button'" onmouseover="this.className='div-button-over delete-button'" ">Delete</div>
        </c:if>
        </div>
          <c:if test="${empty pagnation || pagnation.pageCount<=0}">
            <div >
              <div class="btn to-question-list-btn" onclick="toQuestionList();">Back Question List</div>
            </div>
          </c:if>
        </div>
      </div>
    </div>
    <div class="footer">
      <p> Copyright © 2014 Augmentum, Inc.All Rights Reserved.</p>
    </div>
    <div class="modal-dialog" id="modalDialog">
      <div onclick="modalDialogHidden();" title="Close Dialog" class="modal-dialog-closebutton">
      </div>
      <div class="modal-dialog-msg" id="msgContent">
      </div>
      <div class="modal-dialog-btn-outdiv">
        <div class="modal-btn modal-dialog-btn-yes single-button" onclick="modalDialogHidden();">OK</div>
      </div>
    </div>
    <div class="modal-dialog" id="confirmDialog">
      <div onclick="confirmHidden();" title="Close Dialog" class="modal-dialog-closebutton">
      </div>
      <div class="modal-dialog-msg" id="confirmContent">
      </div>
    <div class="modal-dialog-btn-outdiv">
        <div class="modal-btn modal-dialog-btn-yes" onclick="submitForm();">YES</div>
        <div class="modal-btn modal-dialog-btn-no" onclick="confirmHidden();">NO</div>
      </div>
    </div>
    <div class="modal-div" id="modalDiv">
    </div>
    <script type="text/javascript">

       $(function(){
            document.onkeydown = function(event) {
                if (!event) {
                    event = window.event;
                }
                if ((event.keyCode || e.which) == 13) {
                    var currentPage = $("#currentPageHidden").val();
                    var sort = $("#sortHidden").val();
                    var pageSize = $("#pageSizeHidden").val();
                    searchQuestion(currentPage, sort, pageSize);
                }
            }
          var uppath = " <%=PropertyUtil.getStaticPath() %>/static/images/ICN_Decrese_10x15.png.png";
          var downpath = " <%=PropertyUtil.getStaticPath() %>/static/images/ICN_Increase_10x15.png.png";
          var imgObj = document.getElementById("sort");
          var status = $("#status").val();
          if (status == 'DESC') {
              imgObj.src = downpath;
          } else {
              imgObj.src = uppath;
          }
      });
    </script>
  </body>
</html>